<template>
  <div>
    <q-list no-border separator>
      <q-item>
        <q-item-section avatar class="size-14 text-gery-6">昵称</q-item-section>
        <q-item-section>{{ auth.username }}</q-item-section>
        <q-item-section side class="size-14 text-gery-6">暂不支持修改</q-item-section>
      </q-item>
      <q-item>
        <q-item-section avatar class="size-14 text-gery-6">介绍</q-item-section>
        <q-item-section>
          <q-input dense v-model="slogan" max-length="20"/>
        </q-item-section>
        <q-item-section side class="size-14 text-gery-6">
          <q-btn @click="setSlogan" color="primary" label="保存"/>
        </q-item-section>
      </q-item>
    </q-list>
  </div>
</template>

<script>
  import { authMixin } from '../../../mixins'

  export default {
    name: 'pageSettingsName',
    mixins: [authMixin],
    data: function () {
      return {
        name: '',
        slogan: ''
      }
    },
    created () {
      this.slogan = this.auth.slogan
    },
    methods: {
      async setSlogan () {
        const { status } = await this.postRequest({
          api: '/api/user/slogan/',
          data: {
            slogan: this.slogan
          }
        })

        if (status === 200) {
          this.notify('success', '修改成功')
        } else {
          this.notify('error', '发生错误，请稍后重试！')
        }

        this.$store.commit('setAuth', { slogan: this.slogan })
        this.updateCookieUser()
      }
    }
  }
</script>

<style lang="stylus">

</style>
